<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	ul{width:396px; height:276px;margin:0;padding: 0; border:1px solid #000;margin: 40px auto 0;padding: 10px 0 0 10px; position: relative;}
	li{width:120px; height:80px;list-style: none;float: left; margin: 0 10px 10px 0;background-color: #ccc;border: 1px solid red;z-index:0;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oUl = document.getElementById('ul1');
		var aLi = document.getElementsByTagName('li');

		//布局转换
		for (var i = 0; i < aLi.length; i++) {
			aLi[i].innerHTML = 'left:'+ aLi[i].offsetLeft +',top:' + aLi[i].offsetTop;

			aLi[i].style.left = aLi[i].offsetLeft + 'px';
			aLi[i].style.top = aLi[i].offsetTop + 'px';
		};
		for (var i = 0; i < aLi.length; i++) {
			aLi[i].style.position = 'absolute';
		};

		//事件绑定
		for (var i = 0; i < aLi.length; i++) {
			var z=1;			//层级一直提高，防止视觉上被覆盖
			aLi[i].onmouseover = function (){

				doMove(this, {'width':200, 'height':160, 'marginLeft':-40, 'marginTop':-40});
				this.style.zIndex = z ++;
				//document.title=z;
			}
			aLi[i].onmouseout = function (){
				doMove(this, {'width':120, 'height':80, 'marginLeft':0, 'marginTop':0});
			}
		};
	}

	function doMove(obj, json){
		clearInterval(obj.timer);

		obj.timer = setInterval(function(){
			var bStop = true;
			var iCur = 0;

			for (var attr in json){

				if (attr == 'opacity') {
					iCur = parseInt(parseFloat(getStyle(obj, attr))*100 );
				}else{
					iCur = parseInt(getStyle(obj, attr));
				};

				var iSpeed = (json[attr] - iCur)/8;
				iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
	
				if (attr == 'opacity') {
					obj.style.opacity = (iCur + iSpeed)/100;
					obj.style.filter = 'alpha(opacity:'+ (iCur + iSpeed) +')';
				}else{
					obj.style[attr] = iCur + iSpeed + 'px';
				};

				if (iCur != json[attr]) {
					bStop = false;
				};
			}

			if (bStop) {
				clearInterval(obj.timer);
			};
		},30);
	}

	function getStyle(obj, attr){
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
	}
	</script>
</head>
<body>
	<ul id="ul1">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>